<!-- 表单 》 多选日期 -->

<template>
  <el-form-item v-bind="formItem">
    <!-- 标签 -->
    <template v-if="hasLabelSlot" #label>
      <slot name="label" :label="formItem.label">{{ formItem.label }}</slot>
    </template>

    <el-date-picker v-model="model" v-bind="commonProps" type="dates" @change="emitChange" />
  </el-form-item>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import dayjs from 'dayjs'
import mixForm from '../mixForm'

const name = 'FormDateMulti'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name,

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [mixForm],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: CORE.WEB[name],

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      model: null, // 内部绑定值
      EMPTY: [], // 空值常量
    }
  },

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 选择器配置
     */
    pickerOptions() {
      const { weekFirst, disabledDate } = this
      return { firstDayOfWeek: weekFirst || 7, disabledDate }
    },

    /**
     * 公共属性
     */
    commonProps() {
      const { elProps, className, prop, isDisabled, noClear, placeholder, size, format, pickerOptions } = this
      return {
        ...elProps,
        name: prop,
        class: className,
        disabled: isDisabled,
        clearable: !noClear,
        placeholder,
        size,
        popperClass: 'CoreWeb-FormDateMulti-popper',
        valueFormat: format ? 'yyyy-MM-dd' : 'timestamp',
        pickerOptions,
      }
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 是否不等 (可覆盖)
     */
    isDiff() {
      const { obj, prop, model, string } = this
      const values = obj[prop]
      const length = (model || []).length

      // 非数组
      if (!values || !CORE.isArray(values)) return true
      // 长度不等
      if (values.length !== length) return false
      // 判断所有顺序是否都相等
      return values.some((item, i) => item !== (string ? `${model[i]}` : model[i]))
    },

    /**
     * 设置内部绑定值 (可覆盖)
     */
    setModel() {
      const { obj, prop, init, EMPTY, string } = this
      const values = obj[prop]
      const trans = (value) => string && CORE.isInt(value) ? Number(value) : value

      // 无值或非数组
      if (CORE.isEmpty(values) || !CORE.isArray(values)) this.model = init || EMPTY
      // 有值
      else this.model = values.filter((value) => value).map(trans)
    },

    /**
     * 获取最终回传值 (可覆盖)
     */
    getValue() {
      const { model, EMPTY, format, string } = this
      if (CORE.isEmpty(model)) return EMPTY
      if (format || !string) return model
      return model.map((value) => `${value}`)
    },

    /**
     * 是否相等 (可覆盖)
     */
    equals(value) {
      const { obj, prop, string } = this
      const values = obj[prop]
      const length = (value || []).length

      // 非数组
      if (!values || !CORE.isArray(values)) return false
      // 长度不等
      if (values.length !== length) return false
      // 判断所有顺序是否都相等
      return values.every((item, i) => item === (string ? `${value[i]}` : value[i]))
    },

    /**
     * 禁用日期
     */
    disabledDate(date) {
      const { limit, model, history, future, format } = this
      const length = (model || []).length

      if (!date) return false

      if (limit && length >= limit) {
        const value = format ? CORE.dateStr(date) : date.getTime()
        return !model.some((item) => item === value)
      }

      if (history) return date.getTime() > dayjs().valueOf()
      if (future) return date.getTime() < dayjs().startOf('day').valueOf()

      return false
    },
  },
}
</script>
